<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="5">
        <el-card shadow="hover" style="height: 280px">
          <div class="text item">
            <el-button
              @click="toBigScreen"
              icon="el-icon-s-promotion"
              style="width: 300px; height: 240px"
              type="success"
              round
              plain
              >点此进入中国大屏</el-button
            >
          </div>
        </el-card>

        <el-card shadow="hover" style="height: 300px; margin-top: 10px">
          <el-button
            @click="toBigScreenWorld"
            icon="el-icon-s-promotion"
            style="width: 300px; height: 250px"
            type="primary"
            round
            plain
            >点此进入世界大屏</el-button
          >
        </el-card>

        <el-card shadow="hover" style="height: 146px; margin-top: 10px">
          <div class="text item">
            <h1 style="line-height: 106px">上面被我写满了点击进入大屏</h1>
          </div>
        </el-card>
      </el-col>
      <el-col :span="14" style="padding-left: 10px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-card shadow="hover">
              <el-link type="primary" href="/cncov"
                >疫情数据管理-中国总体</el-link
              >
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <el-link type="primary" href="/cncity"
                >疫情数据管理-中国各省市</el-link
              >
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <el-link type="primary" href="/usacov"
                >疫情数据管理-美国数据</el-link
              >
            </el-card>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px" :gutter="10">
          <el-col :span="8">
            <el-card shadow="hover">
              <el-link type="primary" href="/news">新闻管理-新闻列表</el-link>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <el-link type="primary" href="/vacc"
                >疫苗数据-中国接种数据</el-link
              ></el-card
            >
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover">
              <el-link type="primary" href="/worldvacc"
                >疫苗数据-世界接种数据</el-link
              >
            </el-card>
          </el-col>
        </el-row>

        <el-card shadow="hover" style="height: 300px; margin-top: 10px">
          <div class="text item">
            <h1>↑上面是没有用的导航链接</h1>
            <div
              id="imgbox"
              style="
                margin: 20px;
                display: table-cell;
                width: 1000px;
                height: 210px;
                vertical-align: middle;
              "
            >
              <img src="@/assets/welcome.png" />
            </div>
            <h1>↓下面是也没有用的轮播图</h1>
          </div>
        </el-card>
        <el-card shadow="hover" style="height: 300px; margin-top: 10px">
          <div class="text item">
            <el-carousel :interval="6000" type="card" height="250px">
              <el-carousel-item v-for="(item, index) in images" :key="index">
                <a :href="item.path">
                  <img
                    style="
                      display: block;
                      width: 100%;
                      height: 100%;
                      overflow: hidden;
                    "
                    :src="item.url"
                  />
                </a>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-card>
      </el-col>
      <el-col :span="5" style="padding-left: 10px">
        <el-card shadow="hover" style="height: 725px">
          <div class="right">你好 欢迎光临</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nowDate: "",
      images: [
        { url: require("@/assets/carousel/1.jpg"), path: "/cncov" },
        { url: require("@/assets/carousel/2.jpg"), path: "/cncity" },
        { url: require("@/assets/carousel/3.jpg"), path: "/usacov" },
        { url: require("@/assets/carousel/4.jpg"), path: "/news" },
        { url: require("@/assets/carousel/5.jpg"), path: "/vacc" },
        { url: require("@/assets/carousel/6.jpg"), path: "/worldvacc" },
      ],
      date: new Date(),
    };
  },
  mounted() {
    this.currentTime();
  },
  beforeDestroy() {
    if (this.formatDate) {
      clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
    }
  },
  methods: {
    formatDate() {
      let date = new Date();
      let year = date.getFullYear(); // 年
      let month = date.getMonth() + 1; // 月
      let day = date.getDate(); // 日
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let hour = date.getHours(); // 时
      hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
      let minute = date.getMinutes(); // 分
      minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
      let second = date.getSeconds(); // 秒
      second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
      this.nowDate = `${year}年${month}月${day}日${hour}:${minute}:${second} ${weekArr[week]}`;
    },
    currentTime() {
      setInterval(this.formatDate, 500);
    },
    toBigScreen() {
      this.$router.push("/bigscreen");
    },
    toBigScreenWorld() {
      this.$router.push("/bigscreenworld");
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  overflow-y: auto;
  // height: calc(100vh - 36px);
  background-color: #f6f9f9;
  padding-bottom: 10px;
  padding-right: 10px;
}
h1 {
  margin: 0 auto;
  text-align: center;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.navigation {
  position: absolute;
  .link {
    position: relative;
    left: 50%;
  }
}

@font-face {
  font-family: "txts";
  src: url("../assets/fonts/腾祥铁山楷书简.TTF");
}
.right {
  // background-color: pink;
  height: 670px;
  width: 100%;
  writing-mode: vertical-lr;
  text-align: center;
  line-height: 290px;
  font-size: 50px;
  letter-spacing: 20px;
  font-family: "txts";
  font-weight: bold;
}
</style>